<template>
  <div id="Service">
    <header>
      <span class="reset" @click="handleClick">返回</span>樊登读书客户为您服务
    </header>
    <main>
      <ul>
        <li v-for="(value, index) in arr" :key="value">
          <div class="myinformation">
            <img src="../assets/images/客户中心/u1.png" alt="" />
            <div>
              {{ value }}
            </div>
          </div>
          <div class="maincontent" v-if="sevicediv && index + 1 === arr.length">
            <div class="top">
              <img src="../assets/images/客户中心/logo.png" alt="" />
            </div>
            <van-tabs
              v-model:active="active"
              line-width="70px"
              color="#3679EC"
              title-active-color="#3679EC"
              title-inactive-color="#333333"
              swipeable
            >
              <van-tab title="APP使用问题">
                <p>*想了解樊登读书企业相关介绍？</p>
                <p>*樊登读书APP版本号在哪里看？</p>
                <p>*怎么下载/更新樊登读书APP？</p>
                <p>*在樊登APP内怎么找想听的书？</p>
              </van-tab>
              <van-tab title="礼品卡问题">
                <p>*想了解樊登读书企业相关介绍？</p>
                <p>*樊登读书APP版本号在哪里看？</p>
                <p>*怎么下载/更新樊登读书APP？</p>
                <p>*在樊登APP内怎么找想听的书？</p></van-tab
              >
              <van-tab title="企读相关咨询">
                <p>*想了解樊登读书企业相关介绍？</p>
                <p>*樊登读书APP版本号在哪里看？</p>
                <p>*怎么下载/更新樊登读书APP？</p>
                <p>*在樊登APP内怎么找想听的书？</p></van-tab
              >
            </van-tabs>
          </div>
          <div class="serviceinformation" v-else>
            <div>
              {{ sevicearr[index] }}
            </div>
            <img src="../assets/images/客户中心/头像.png" alt="" />
          </div>
        </li>
      </ul>
    </main>
    <footer>
      <div class="footerBtn">
        <div @click="leftClick">爱心建议</div>
        <div @click="middleClick">修改手机号码？</div>
        <div @click="rightClick">商城订单查询</div>
      </div>
      <img src="../assets/images/客户中心/语音.png" alt="" />
      <input type="text" v-model="inputvalue" @keyup.enter="Keyup" />
      <div>
        <img src="../assets/images/客户中心/表情.png" alt="" />
        <img src="../assets/images/客户中心/加.png" alt="" class="lastimg" />
      </div>
    </footer>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
export default {
  setup() {
    //返回功能
    const router = useRouter();
    const handleClick = () => {
      router.go(-1);
    };
    //自动回复功能
    const arr = reactive([]);
    const sevicearr = reactive([]);
    const inputvalue = ref("");
    const sevicediv = ref(true);
    const Keyup = () => {
      let greet = /[请好在吗]/g;
      let res = /[帮忙问想1]/g;
      if (inputvalue.value) {
        if (inputvalue.value.match(greet)) {
          arr.push(inputvalue.value);
          inputvalue.value = "";
          sevicearr.push("您好,小樊为您服务");
          sevicediv.value = false;
        } else if (inputvalue.value.match(res)) {
          arr.push(inputvalue.value);
          sevicediv.value = true;
          inputvalue.value = "";
        } else {
          arr.push(inputvalue.value);
          sevicearr.push("您好,需要帮助请回复1哦!亲");
          inputvalue.value = "";
          sevicediv.value = false;
        }
      }
    };
    //点击发送
    const Keydown = (key) => {
      arr.push(inputvalue.value);
      inputvalue.value = "";
      sevicearr.push(key);
      sevicediv.value = false;
    };
    const leftClick = () => {
      inputvalue.value = "爱心建议";
      Keydown("建议杰哥请班上的同学喝奶茶");
    };
    const middleClick = () => {
      inputvalue.value = "修改手机号码";
      Keydown("杰哥吓得修改了手机号码");
    };
    const rightClick = () => {
      inputvalue.value = "商城订单查询";
      Keydown("杰哥还是买了80来杯奶茶");
    };
    return {
      Keydown,
      rightClick,
      middleClick,
      leftClick,
      sevicediv,
      sevicearr,
      arr,
      inputvalue,
      router,
      handleClick,
      Keyup,
    };
  },
};
</script>

<style lang="less">
#Service {
  header {
    position: fixed;
    display: flex;
    top: 0px;
    left: 0px;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 100%;
    z-index: 800;
    background: white;
    .reset {
      position: absolute;
      color: #3a7ed3;
      font-weight: 600;
      left: 10px;
      top: 25px;
      transform: translateY(-50%);
    }
    font-size: 16px;
    font-family: PingFangSC;
    font-weight: 800;
    color: #000000;
  }
  main {
    background: #ededed;
    height: 760px;
    margin-top: 50px;
    width: 100%;
    margin-bottom: 120px;
    overflow: auto;
    .serviceinformation {
      align-items: center;
      display: flex;
      justify-content: flex-end;
      font-size: 16px;
      font-family: PingFangSC;
      font-weight: 500;
      color: #000000;
      div {
        background: white;
        padding: 0 10px;
        height: 40px;
        line-height: 40px;
        border-radius: 5px;
      }
      img {
        width: 43px;
        height: 43px;
        margin: 10px;
      }
    }
    .maincontent {
      width: 360px;
      height: 266px;
      background: white;
      border-radius: 10px;
      margin-left: 10px;
      img {
        width: 124px;
        height: 36px;
        margin-left: 9px;
        margin-top: 7px;
      }
      .van-tab__text {
        font-size: 16px;
        font-family: PingFangSC;
        font-weight: 500;
      }
      .van-tab__pane {
        p {
          padding: 0 10px;
          height: 40px;
          font-size: 14px;
          font-family: PingFangSC;
          font-weight: 500;
          color: #333333;
          line-height: 40px;
          border-bottom: 2px dashed#F7F7F7;
        }
      }
    }
    .myinformation {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-family: PingFangSC;
      font-weight: 500;
      color: #000000;
      div {
        background: white;
        padding: 0 10px;
        height: 40px;
        line-height: 40px;
        border-radius: 5px;
      }
      img {
        width: 43px;
        height: 43px;
        margin: 10px;
      }
    }
  }
  footer {
    .footerBtn {
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: #ededed;
      div {
        padding: 10px;
        font-size: 14px;
        font-family: PingFangSC;
        font-weight: 800;
        color: #202020;
        border-radius: 30px;
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      position: absolute;
      top: -60px;
      left: 0px;
      width: 100%;
      height: 60px;
    }
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    img {
      width: 28px;
      height: 28px;
    }
    input {
      text-indent: 20px;
      border: none;
      width: 225px;
      height: 34px;
      background: #fefefe;
      border-radius: 17px;
    }
    height: 60px;
    background: #f6f6f6;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    .lastimg {
      margin-left: 10px;
    }
  }
}
</style>
